<template>
    <div class="navigation">
        <template v-for="(item, index) in navigation" :key="index">
            <NuxtLink
                v-if="item.isEnable"
                class="nav-item"
                :class="{ active: currentIndex === index}"
                :external="false"
                :to="{
                    path: item.link?.path,
                    query: item.link?.query
                }"
                @click="currentIndex = index"
            >
                <img
                    v-if="currentIndex === index"
                    :src="appStore.toAbsoluteUrl(item.selected)"
                    class="w-[24px] h-[24px]"
                    alt=""
                />
                <img
                    v-else
                    :src="appStore.toAbsoluteUrl(item.unselected)"
                    class="w-[24px] h-[24px]"
                    alt=""
                />
                <span class="mt-[6px] text-sm leading-4">{{ item.name }}</span>
            </NuxtLink>
        </template>
    </div>
</template>

<script lang="ts" setup>
import { diyEnum } from '~/enums/app'
import useAppStore from '~/stores/app'

const route = useRoute()
const appStore = useAppStore()

const diyData = await appStore.getDiy(diyEnum.DESK)
const navigation = diyData.asides.nav

const currentIndex = ref(0)
const routeIndex = navigation.findIndex((nav: any) => {
    const routePath = route.path === '/' ? route.path : route.path.replace(/\/$/, '')

    const pathArr = nav.link?.path.split('/')
    let refixPath = '/' + pathArr[1]
    if (pathArr.length >= 3) {
        refixPath = '/' + pathArr[1] + '/' + pathArr[2]
    }

    return nav.link === route.meta.activePath || routePath.startsWith(refixPath)
})

currentIndex.value = routeIndex
</script>

<style lang="scss" scoped>
.navigation {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0;
    .nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 64px;
        height: 64px;
        margin-bottom: 15px;
        color: var(--el-text-color-regular);
        text-align: center;
        cursor: pointer;
        border-radius: 6px;
        &.active {
            color: var(--el-color-primary);
            background-color: var(--el-bg-color-page);
        }
        &:hover {
            cursor: pointer;
            background-color: var(--el-bg-color-page);
        }
    }
}
</style>